//商店信息
import React from "react";
import "./css/StoreInfo.css";
import TitleSet from "../../component/set/TitleSet";
import { Form, Input, Button, Cascader, Radio, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import IconFont from "../../component/logo";
import "../../component/set/css/utils.css";
import HOCStoreInfo from "../../component/set/HOC/HOCStoreInfo";

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 10 },
};

@HOCStoreInfo
class StoreInfo extends React.Component {
  render() {
    let {
      //method
      beforeUploadImg,
      handleRemove,
      submit,
      onValuesChangeForm,
      loadData,
      handleChangeCascader,
      //state
      clogo,
      pqr,
      wechat_logo,
      options,
    } = this.props;
    return (
      <>
        <div className="storeInfo">
          <div className="info-content">
            <TitleSet
              value="基本信息"
              icon={<IconFont type="icon-weizhi" />}
            ></TitleSet>
            <div className="form">
              <Form
                {...layout}
                name="infoOne"
                onValuesChange={(changedValues, allValues) =>
                  onValuesChangeForm("form", changedValues, allValues)
                }
                ref="formOne"
              >
                <Form.Item
                  label="商店名称"
                  name="shopName"
                  rules={[{ required: true, message: "请输入商店名称" }]}
                >
                  <Input className="info-border"></Input>
                </Form.Item>
                <Form.Item
                  label="商店标题"
                  rules={[{ required: true, message: "请输入商店标题" }]}
                  name="shopTity"
                >
                  <Input className="info-border"></Input>
                </Form.Item>
                <Form.Item
                  label="商店描述"
                  rules={[{ required: true, message: "请输入商店描述" }]}
                  name="shopMs"
                >
                  <Input className="info-border"></Input>
                </Form.Item>
                <Form.Item
                  label="商店关键字"
                  rules={[{ required: true, message: "请输入商店关键字" }]}
                  name="shopKw"
                >
                  <Input className="info-border"></Input>
                </Form.Item>
                <Form.Item
                  label="所在地区"
                  rules={[{ required: true, message: "请选择所在地区" }]}
                  name="storeArea"
                >
                  <Cascader
                    loadData={loadData}
                    options={options}
                    placeholder="请选择所在地区"
                    changeOnSelect
                    onChange={handleChangeCascader}
                  ></Cascader>
                </Form.Item>
                <Form.Item
                  label="详细地址"
                  rules={[{ required: true, message: "请填写详细地址" }]}
                  name="shopAddress"  
                >
                  <Input className="info-border"></Input>
                </Form.Item>
                <Form.Item
                  label="成团时间"
                  rules={[{ required: true, message: "请填写成团时间" }]}
                  name="ctime"
                >
                  <Input
                    className="info-border"
                    placeholder="以小时为单位"
                  ></Input>
                </Form.Item>
                <Form.Item
                  label="申请退款时间"
                  rules={[{ required: true, message: "请填写申请退款时间" }]}
                  name="rof"
                >
                  <Input
                    className="info-border"
                    placeholder="以天为单位"
                  ></Input>
                </Form.Item>
              </Form>
            </div>
          </div>
          <div className="info-content">
            <TitleSet
              value="客服信息"
              icon={<IconFont type="icon-kefu" />}
            ></TitleSet>
            <div className="form">
              <Form
                {...layout}
                name="infoTwo"
                onValuesChange={(changedValues, allValues) =>
                  onValuesChangeForm("form", changedValues, allValues)
                }
                ref="formTwo"
              >
                <div className="formTwo">
                  <Form.Item
                    label="客服类型"
                    rules={[{ required: true, message: "请选择客服类型" }]}
                    className="noAfter"
                    name="lsType"
                  >
                    <Radio.Group>
                      <Radio value={0}>QQ客服</Radio>
                      <Radio value={1}>第三方</Radio>
                    </Radio.Group>
                  </Form.Item>
                </div>
                <Form.Item
                  label="客服链接"
                  rules={[{ required: true, message: "请输入商店标题" }]}
                  name="ls"
                >
                  <Input className="info-border"></Input>
                </Form.Item>
                <Form.Item
                  label="客服电话"
                  rules={[{ required: true, message: "请输入客服电话" }]}
                  name="ct"
                >
                  <Input className="info-border"></Input>
                </Form.Item>
                <div className="formTwo">
                  <Form.Item
                    label="暂时关闭商店"
                    rules={[{ required: true, message: "请选择商店状态" }]}
                    name="shopType"
                  >
                    <Radio.Group>
                      <Radio value={0}>否</Radio>
                      <Radio value={1}>是</Radio>
                    </Radio.Group>
                  </Form.Item>
                </div>
                <div className="formTwo formTwoBorder">
                  <Form.Item
                    label="关闭商店原因"
                    rules={[{ required: true, message: "请填写关闭商店原因" }]}
                    name="shopCr"
                  >
                    <Input.TextArea
                      className="info-border"
                      maxLength={30}
                    ></Input.TextArea>
                  </Form.Item>
                </div>
              </Form>
            </div>
          </div>
          <div className="info-content">
            <TitleSet
              value="其它信息"
              icon={<IconFont type="icon-19" />}
            ></TitleSet>
            <div className="form">
              <Form
                {...layout}
                name="infoOne"
                ref="formThree"
                onValuesChange={(changedValues, allValues) =>
                  onValuesChangeForm("form", changedValues, allValues)
                }
              >
                <div className="formTwo">
                  <Form.Item
                    label="电脑端logo"
                    name="clogo"
                    rules={[{ required: true, message: "请上传电脑端logo" }]}
                  >
                    <Upload
                      action=""
                      listType="picture"
                      className="upload-list-inline"
                      fileList={clogo}
                      beforeUpload={(file) => beforeUploadImg(file, "clogo")}
                      onRemove={(file) => handleRemove(file, "clogo")}
                    >
                      <Button icon={<UploadOutlined />}>Upload</Button>
                    </Upload>
                  </Form.Item>
                </div>
                <div className="formTwo">
                  <Form.Item
                    label="公众号二维码"
                    name="pqr"
                    rules={[{ required: true, message: "请上传公众号二维码" }]}
                  >
                    <Upload
                      action=""
                      listType="picture"
                      className="upload-list-inline"
                      fileList={pqr}
                      beforeUpload={(file) => beforeUploadImg(file, "pqr")}
                      onRemove={(file) => handleRemove(file, "pqr")}
                    >
                      <Button icon={<UploadOutlined />}>Upload</Button>
                    </Upload>
                  </Form.Item>
                </div>
                <div className="formTwo">
                  <Form.Item
                    label="微信端logo"
                    name="wechatLogo"
                    rules={[{ required: true, message: "请上传微信端logo" }]}
                  >
                    <Upload
                      action=""
                      listType="picture"
                      className="upload-list-inline"
                      fileList={wechat_logo}
                      beforeUpload={(file) =>
                        beforeUploadImg(file, "wechat_logo")
                      }
                      onRemove={(file) => handleRemove(file, "wechat_logo")}
                    >
                      <Button icon={<UploadOutlined />}>Upload</Button>
                    </Upload>
                  </Form.Item>
                </div>
                <div className="formTwo">
                  <Form.Item
                    label="关注后购买"
                    rules={[{ required: true, message: "请选择" }]}
                    name="buyStatus"
                  >
                    <Radio.Group>
                      <Radio value={0}>不提示</Radio>
                      <Radio value={1}>提示关注</Radio>
                      <Radio value={2}>强制关注</Radio>
                    </Radio.Group>
                  </Form.Item>
                </div>
              </Form>
              <div className="btn">
                <Button onClick={submit}>确定</Button>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default StoreInfo;
